<template>
  <!--
  <router-view v-slot="{ Component, route }">
    <transition :name="route.meta.transition">
      transition过渡只能包含单一节点，所以用div包裹起来，解决vue警告  
      <keep-alive>
        <div :key="route.path">
          <component :is="Component"></component>
        </div>
      </keep-alive>
    </transition>
  </router-view>
  -->
  <router-view></router-view>
  <van-tabbar v-if="showTabbar" route>
    <van-tabbar-item replace to="/home" icon="home-o">主页</van-tabbar-item>
    <van-tabbar-item replace to="/search" icon="search">搜索</van-tabbar-item>
    <van-tabbar-item replace to="/mine" icon="user-o">我的</van-tabbar-item>
    <van-tabbar-item replace to="/setting" icon="setting-o"
      >设置</van-tabbar-item
    >
  </van-tabbar>
</template>
<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
  setup() {
    const store = useStore()
    return {
      showTabbar: computed(() => store.state.showTabbar),
    }
  },
}
</script>
<style scoped></style>
